<template>
  <div>
    <div class="accordion-section">
      <div class="font-weight-500 line-hight-140 mb-4" :class="{ 'font-size-24': !isMobile, 'font-size-20': isMobile }">
        {{ $t('title.help') }}
      </div>
      <div class="accordion-wrap">
        <div v-for="(n, i) in accordionList" :key="`accordion-${i}`">
          <div
            class="accordion-title"
            @click="togglePanel(i)"
            :class="{ active: isActive(i), 'mb-0': i === accordionList.length - 1 }"
          >
            <ol :start="i + 1" class="font-size-16 line-height-140 font-weight-500 pl-4">
              <li>{{ n.title }}</li>
            </ol>
            <Icon class="down" name="down" :class="{ rotate: isActive(i) }"></Icon>
          </div>
          <div class="accordion-content" :class="{ active: isActive(i) }">
            <div class="font-size-16 line-height-140 font-weight-500 text-start">
              {{ n.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 font-size-14 font-weight-400 line-height-140">
      <div class="text-start">{{ $t('premium.cautionTitle') }}</div>
      <ul class="pl-4 text-subtitle text-graydisabled">
        <li v-for="(n, i) in cautionList" :key="`caution-${i}`" class="text-start">{{ n.caution }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { $t } from '@/i18n'

const appStore = useAppStore()
const { isMobile } = storeToRefs(appStore)

// Accordion
const activePanels = ref([])
const togglePanel = (index) => {
  if (activePanels.value.includes(index)) {
    activePanels.value = activePanels.value.filter((i) => i !== index)
  } else {
    activePanels.value.push(index)
  }
}
const isActive = (index) => {
  return activePanels.value.includes(index)
}
const accordionList = ref([])
for (let i = 0; i <= 7; i++) {
  accordionList.value.push({
    title: $t(`premium.title${i}`),
    content: $t(`premium.content${i}`),
  })
}

const cautionList = ref([])
for (let i = 0; i <= 5; i++) {
  cautionList.value.push({
    caution: $t(`premium.caution${i}`),
  })
}
</script>
<style lang="scss" scoped>
.wrapper {
  .content {
    .accordion- {
      &section {
        margin-top: 2rem;
      }

      &wrap {
        border-radius: 0.625rem;
        background: rgb(var(--v-theme-background));
        padding: 1rem;
      }

      &title {
        height: fit-content;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        text-align: start;
        &.active {
          margin-bottom: 0;
        }

        .down {
          transition-duration: 0.3s;
        }
        .rotate {
          transform: rotate(180deg);
        }
      }
      &content {
        margin: 0;
        opacity: 0;
        padding: 0;
        height: 0;
        overflow: hidden;
        pointer-events: none;
        transition-duration: 0.3s;

        &.active {
          padding: 1rem;
          opacity: 1;
          margin: 1rem 0;
          padding: 1rem;
          height: fit-content;
          border-radius: 0.625rem;
          background: rgb(var(--v-theme-surface));
          transform-origin: top center;
        }
      }
    }
  }
}

.desktop {
  .wrapper {
    .content {
      .accordion-wrap {
        padding: 1.5rem 9.375rem;
      }
    }
  }
}
</style>
